<script type="text/html" data-help-name="绘制文本">
    <p>设置文本</p>
</script>
  

<script type="text/html" data-template-name="绘制文本">
  <!-- Name -->
  <div class="form-row">
    <label for="node-input-name"><i class="fa fa-tag"></i> 名称</label>
    <input type="text" id="node-input-name" data-i18n="[placeholder]name">
  </div>

  <!-- text content -->
  <div class="form-row">
    <label for="node-input-text_content"><i class="fa fa-tag"></i> 文本内容</label>
    <input type="text" id="node-input-text_content" data-i18n="[placeholder]请输入文本内容">
  </div>

  <!-- x -->
  <div class="form-row">
    <label for="node-input-coord_x"><i class="fa fa-circle"></i> x坐标</label>
    <input type="text" id="node-input-coord_x">
  </div>
  <!-- y -->
  <div class="form-row">
    <label for="node-input-coord_y"><i class="fa fa-circle"></i> y坐标</label>
    <input type="text" id="node-input-coord_y">
  </div>

  <!-- text color -->
  <div class="form-row">
    <label for="node-input-font_size"><i class="fa fa-circle"></i> 设置字体大小</label>
    <select id="node-input-font_size" style="width: 250px;">
      <option value="8">8</option>
      <option value="12">12</option>
      <option value="16">16</option>
      <option value="20">20</option>
      <option value="24">24</option>
      <option value="32">32</option>
      <option value="36">36</option>
      <option value="48">48</option>
      <option value="60">60</option>
      <option value="72">72</option>
      <option value="96">96</option>
      <option value="128">128</option>
      <option value="custom">自定义</option>
    </select>
  </div>
    <!-- 下拉选项框选择了自定义 -->
    <div class="form-row" id="node-set-state1">
      <label for="node-input-custom_size">&nbsp;</label>
      <input type="text" id="node-input-custom_size" data-i18n="[placeholder]填入非负整数">
    </div>

  <!-- text color -->
  <div class="form-row">
    <label for="node-input-font_color"><i class="fa fa-circle"></i> 设置字体颜色</label>
    <select id="node-input-font_color" style="width: 250px;">
      <option value="#FF0000">红色</option>        <!-- red -->
      <option value="#00FF00">绿色</option>   <!-- green -->
      <option value="#0000FF">蓝色</option>    <!-- blue -->
      <option value="#FFFF00">黄色</option>  <!-- yellow -->
      <option value="#800080">紫色</option>  <!-- purple -->
      <option value="#00FFFF">青色</option>    <!-- cyan -->
      <option value="#FFA500">橙色</option>  <!-- orange -->
      <option value="#FFC0CB">粉红色</option>  <!-- pink -->
      <option value="#000000">黑色</option>   <!-- black -->
      <option value="#FFFFFF">白色</option>   <!-- white -->
      <option value="custom">自定义</option>
    </select>
  </div>
  <!-- 下拉选项框选择了自定义 -->
  <div class="form-row" id="node-set-state2">
    <label for="node-input-custom_color">&nbsp;</label>
    <input type="text" id="node-input-custom_color" data-i18n="[placeholder]填写格式为#0099FF">
  </div>

  <div class="form-row" id="node-set-tick">
    <label>&nbsp;</label>
    <input type="checkbox" id="node-input-set" style="display: inline-block; width: auto; vertical-align: top;">
    <label for="node-input-set" style="width: 70%;">设置优先级: 默认优先级为7 </label>
  </div>
  <div class="form-row" id="node-set-state3">
    <label for="node-input-priority">&nbsp;</label>
    <select id="node-input-priority" style="width: 250px;">
      <option value="1">优先级1</option>
      <option value="2">优先级2</option>
      <option value="3">优先级3</option>
      <option value="4">优先级4</option>
      <option value="5">优先级5</option>
      <option value="6">优先级6</option>
      <option value="7">优先级7</option>
      <option value="8">优先级8</option>
      <option value="9">优先级9</option>
      <option value="10">优先级10</option>
    </select>
  </div>
  </script>
  

  
  <script type="text/javascript">
      RED.nodes.registerType('绘制文本',{
        category: 'Block LCD绘图',
        color: '#ffcb3c',
        defaults: {
          name: {value: ""},
          text_content: {value: ""},
          coord_x: {value: "", required: true},  // int
          coord_y: {value: "", required: true},  // int
          font_size: {value:"32"},
          custom_size: {value:""},
          font_color: {value: "#000000"},  // 默认字体颜色为黑色
          custom_color: {value:""},
          priority: {value:"7"},
          set: {value:""}
        }, 
        inputs:1,
        outputs:0,
        icon: "font-awesome/fa-pencil",
        label: function() {
          return this.name||this._("设置文本");
        },

        oneditprepare: function() {
          var setstate1 = function () {
              // 判断选中的选项是否为"custom"
              if ($('#node-input-font_size').val() === "custom") {
                  $("#node-set-state1").show();
              } else {
                  $("#node-set-state1").hide();
              }
          };
          // 绑定下拉菜单的变化事件到setstate函数
          $("#node-input-font_size").change(function () { setstate1(); });
          // 初始化时也调用一次以设置初始状态
          setstate1();

          var setstate2 = function () {
            if ($('#node-input-font_color').val() === "custom") {
                  $("#node-set-state2").show();
              } else {
                  $("#node-set-state2").hide();
              }
          };
          $("#node-input-font_color").change(function () { setstate2(); });
          setstate2();

          var setstate3 = function () {
            if ($('#node-input-set').is(":checked")) {
                $("#node-set-state3").show();
            } else {
                $("#node-set-state3").hide();
            }
          };
          $("#node-input-set").change(function () { setstate3(); });
          setstate3();
            
        }

      });
    </script>
    
